<template>
  <div
      style="display: flex;flex-direction: row;align-content: center;"
      :style="style">
    <div v-for="(item, index) in module.data" :key="index"
         :style="'width:'+ item.width / 2+'px;height:'+ item.height / 2+ 'px;flex-shrink: 0'">
      <img :src="item.image"
           :style="'width:'+ item.width / 2+'px;height:'+ item.height / 2+ 'px;'" v-if="item.image"/>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({


  setup() {
    const state = reactive({
      imgSrc: 'https://249903.m.ecbao.cn/assets/store/img/diy/banner/01.png',
      style: '',
      module: {
        config: {
          outer: {},
        },
        data: []
      }
    })

    const init = (module) => {
      state.module = module
      setOuterStyle()
    }

    // 设置外层容器样式
    const setOuterStyle = () => {
      let style = []
      let config: Record<string, string | number | any> = state.module.config.outer || {}
      if (config['width']) style.push('width:' + config['width'] / 2 + 'px')
      if (config['height']) style.push('height:' + config['height'] / 2 + 'px')
      if (config['paddingTop']) style.push('padding-top:' + config['paddingTop'] / 2 + 'px')
      if (config['paddingBottom']) style.push('padding-bottom:' + config['paddingBottom'] / 2 + 'px')
      if (config['background']) style.push('background:' + config['background'])
      if (config['alignItems']) style.push('align-items:' + config['alignItems'])
      if (config['justifyContent']) style.push('justify-content:' + config['justifyContent'])
      state.style = style.join(';')
    }

    return {
      ...toRefs(state),
      init
    }
  }
})
</script>